<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/js/public.js" type="text/javascript" charset="utf-8"></script>
    <link type="text/css" rel="stylesheet" href="__PUBLIC__/css/jedate.css">
    <script type="text/javascript" src="__PUBLIC__/js/jedate.js"></script>
    <title>预定</title>
</head>
<body>
<div id="reserve">
    <div class="date">
        <div class="dateList">
            <span class="year">2018年</span>
            <span class="mouth">10月</span>
            <span class="day">26日</span>
            <img class="rili" src="__PUBLIC__/images/icon_rili@2x.png"/>
        </div>
        <div class="dateList">
            <span class="hour">17</span>
            <i>:</i>
            <span class="minute">35</span>
        </div>
    </div>
    <div class="jeinpbox">
        <input type="text" class="jeinput" id="time" placeholder="YYYY年MM月DD日">
    </div>
    <div class="meal list">
        <span class="listName">就餐人数</span>
        <span class="pNum"></span>
    </div>
    <div class="table list">
        <span class="listName">桌号</span>
        <span class="tableNum"></span>
    </div>
    <div class="personal">
        <div class="perList">
            <input type="text" name="pname" id="pname" value="" placeholder="姓名" />
            <span class="tips">
					<span class="on">先生</span>
					<span>女士</span>
				</span>
        </div>
        <div class="perList">
            <input type="text" name="phone" id="phone" value="" placeholder="手机号码"/>
        </div>
        <div class="perList">
            <input type="text" name="vcode" id="vcode" value="" placeholder="验证码"/>
            <span class="vcodeBtn">获取验证码</span>
        </div>
        <div class="perList" style="padding: 0 0.4rem;">
            <span class="listName">备注</span>
            <textarea name="remark" class="remark" rows="" cols=""></textarea>
        </div>
    </div>
    <a href="javascript:void(0);" class="submitRe">提交订单</a>
</div>
<!--点餐人数-->
<div class="meals">
    <div class="header">
        <span class="cancel">取消</span>
        <span>就餐人数</span>
        <span class="confirm">确定</span>
    </div>
    <div class="mealsList">
        <span class="mlist on">1位</span>
        <span class="mlist">2位</span>
        <span class="mlist">3位</span>
        <span class="mlist">4位</span>
        <span class="mlist">5位</span>
        <span class="mlist">6位</span>
        <span class="mlist">7位</span>
        <span class="mlist">8位</span>
        <span class="mlist">9位</span>
        <span class="mlist">10位</span>
        <span class="mlist">11位</span>
        <span class="mlist">12位</span>
    </div>
</div>
<!--桌号-->
<div class="dinTable">
    <div class="tableList">
        <span class="tlist">包房（10~14人）</span>
        <span class="tlist">大桌（7~10人）</span>
        <span class="tlist">中桌（3~6人）</span>
        <span class="tlist">小桌（1~2人）</span>
    </div>
    <span class="tcancel">取消</span>
</div>
<!--遮罩-->
<div class="mask"></div>
<script type="text/javascript">
    jeDate("#time",{
        isShow:true,
        theme:{ bgcolor:"#FE9801",color:"#ffffff", pnColor:"rgba(254,152,1,0.6)"},
        format: "YYYY年MM月DD日hh时mm分",
        donefun: function(obj){
            //this    而this指向的都是当前实例
            console.log(obj.elem);     //得到当前输入框的ID
            console.log(obj.val);      //得到日期生成的值，如：2017-06-16

            //得到日期时间对象，range为false
            console.log(obj.date);    //这里是对象
            console.log(obj.date[0]['hh']);    //这里是对象
            console.log(obj.date[0]['mm']);    //这里是对象
            $('.dateList .year').html(obj.date[0]['YYYY']+'年')
            $('.dateList .mouth').html(obj.date[0]['MM']+'月')
            $('.dateList .day').html(obj.date[0]['DD']+'日')
            $('.dateList .hour').html(obj.date[0]['hh'])
            $('.dateList .minute').html(obj.date[0]['mm'])
            obj.date = {YYYY: 2017, MM: 08, DD: 18, hh: 10, mm: 25, ss: 10}

            //开启区域选择，range为字符串 时才会返回一个日期时间数组对象。
            console.log(obj.date);    //这里是数组
            obj.date = [
                {YYYY: 2017, MM: 08, DD: 18, hh: 10, mm: 25, ss: 10},
                {YYYY: 2019, MM: 11, DD: 25, hh: 15, mm: 30, ss: 25}
            ]
        }
    });

    //点餐人数
    $('.meal').on('click',function(){
        $('.meals').animate({
            height:"6.106rem",
        },200).show()
        $('.mask').animate({
            height:"100%",
        },200).show()
        //选中类型（可以修改为方法，取点击的值）
        $('.mealsList .mlist ').on('click',function(){
            $(this).addClass('on').siblings().removeClass('on')
        })
        //取消，点击遮罩层
        $('.mask , .cancel').on('click',function(){
            $('.meals').animate({
                height:"0",
            },200).hide()
            $('.mask').animate({
                height:"0",
            },100).hide()
        })
        //确认（可以修改为方法，取点击的值）
        $('.confirm ').on('click',function(){
            $('.mealsList .mlist').each(function(){
                if($(this).hasClass('on')){
                    $('.pNum').html($(this).html())
                }
            })
            $('.meals').animate({
                height:"0",
            },200).hide()
            $('.mask').animate({
                height:"0",
            },200).hide()
        })
    })

    //桌号
    $('.table').on('click',function(){
        $('.dinTable').animate({
            height:"6.666rem",
        },200).show()
        $('.mask').animate({
            height:"100%",
        },100).show()
        //取消，点击遮罩层
        $('.mask , .tcancel').on('click',function(){
            $('.dinTable').animate({
                height:"0",
            },200).hide()
            $('.mask').animate({
                height:"0",
            },200).hide()
        })

        //选中类型（可以修改为方法，取点击的值）
        $('.tableList .tlist ').on('click',function(){
            $(this).addClass('on').siblings().removeClass('on')
            $('.tableList .tlist').each(function(){
                if($(this).hasClass('on')){
                    $('.tableNum').html($(this).html())
                }
            })
            $('.dinTable').animate({
                height:"0",
            },200).hide()
            $('.mask').animate({
                height:"0",
            },200).hide()
        })
    })

    //选中性别（可以修改为方法，取点击的值）
    $('.tips span').on('click',function(){
        $(this).addClass('on').siblings().removeClass('on')
    })
</script>
</body>
</html>
